<template>
  <div class="top">
    <div class="topContent">
      <div class="topSearch">
        <el-input v-model="searchInfo" placeholder="请输入内容" value=""></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">
          <img src="../assets/搜索.png" alt="" />
        </el-button>
      </div>
      <div class="topLogo">
        <router-link to="/dj">
          <img src="../assets/logo.png" alt="" />
        </router-link>
      </div>
      <div class="topNav">
        <ul>
          <li><router-link to="/dj/movie">选电影</router-link></li>
          <li><router-link :to="{ path: '/dj/TV' }">电视剧</router-link></li>
          <li><router-link :to="{ path: '/dj/rank' }">排行榜</router-link></li>
          <li><router-link :to="{ path: '/dj/review' }">影评</router-link></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
    import {onMounted,getCurrentInstance,ref} from 'vue';
    let {proxy} = getCurrentInstance()
    
  let searchInfo = ref('');

  async function search(){
    await proxy.$axios.get('/dj/search',{
          params:searchInfo.value
        }).then((res)=>{
          console.log(res.data,'搜索结果')
          // 没有搜索到相关信息
          if(res.data.code==0){
            alert(res.data.msg)
          }else{
            // 切换到搜索结果的组件

          }
        })
    // onMounted( 
      // console.log(searchInfo.value,'11')
      // async ()=>{
      //   await proxy.$aixos.get('/dj/search',{
      //     params:searchInfo.value
      //   }).then(()=>{
      //     console.log(res.data)
      //   })
      // }
    
    
    
    // )
    // router.push({
    //   path:'/search',
    //   query:{
    //     searchInfo:serachInfo
    //   }
    // })

  }
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  background-color: #6985c4;

  .topContent {
    width: 1040px;
    height: 115px;
    margin: auto;
    margin-bottom: 40px;
    padding: 30px 0 0 0;

    .topSearch {
      .el-input {
        width: 600px;
        height: 40px;
      }

      .el-button {
        width: 40px;
        height: 40px;

        img {
          width: 18px;
          height: 18px;
          margin: auto;
        }
      }
    }

    .topLogo {
      position: absolute;
      margin-left: 690px;
      margin-top: -30px;

      img {
        width: 260px;
        height: 70px;
      }
    }

    .topNav {
      margin-top: 25px;
      width: 650px;
      border-top: 1px solid #edb141;

      ul {
        list-style: none;
        padding-inline-start: 0px;

        li {
          display: inline-block;
          padding-right: 40px;

          a {
            text-decoration: none;
            color: #edb141;
          }
        }
      }
    }
  }
}
</style>